<html>
<head>
   <script src="../../Grid/GridE.js"> </script>
</head>
<body class="Tutorial">
   <style>
      /* Tutorial shared styles */
      .Tutorial h1,.Tutorial h2,.Tutorial ul,.Tutorial .Desc,.Tutorial .Path,.Tutorial .Xml { max-height:999999px; }
      .Tutorial h1 { font:30px Arial; padding:5px 0px 5px 0px; margin:0px; text-align:center; }
      .Tutorial h2 { font:15px Arial; padding:0px; margin:0px 0px 10px 0px; text-align:center; color:#757575; }
      .Tutorial h3,.Tutorial h4 { display:inline-block; font:bold 15px Arial; padding:0px 5px 0px 5px; border-radius:2px; color:black; margin:2px; font-style:normal; color:#333; }
      .Tutorial h3 { background:#EE9; border:1px solid #DD8; }
      .Tutorial h4 { background:#BDE; border:1px solid #ACD; }
      .Tutorial a { text-decoration:underline; }      
      .Tutorial li { padding-bottom:8px; }
      .Tutorial ul { margin:6px 0px 0px 20px; font:13px Arial; }
      .Tutorial > ul { margin-left:0px; padding-left:15px; clear:both; }
      .Tutorial ul b { color:#0585B9; }
      .Tutorial .Path { font:normal 12px Arial; color:#0585B9; }
      .Tutorial .Path b { color:#D73938; }
      .Tutorial .Path u { text-decoration:none; color:black; font-weight:bold; padding:0px 2px 0px 2px; }
      .Tutorial .Xml { margin-bottom:6px; font-size:12px; color:#757575; }
      .Tutorial .Border { border:1px solid #dfdfdf; padding:10px 20px 10px 20px; margin:0px 8px 20px 0px; min-width:100%; box-sizing:border-box; }
      .Tutorial .Main { }
   </style>

   <center class="Path"><script>document.write(location.href.replace(/(.*)(\/Tutorials\/)([^\/]+)\/([^\/]+)$/,"$2<b>$3</b>/$4").replace(/([^<]|^)(\/|\.)/g,"$1<u>$2</u>"));</script></center>
   <h1>9. Outside edit</h1>
   <h2>Second edit cell outside the grid and cell showing focus</h2>

   <center class="Border" id="Border">
      <div class="Xml">Source: <a href='09-Outside_edit.js' target="_blank">09-Outside_edit.js</a></div>
      <div class="Main" style='width:770px; height:500px;'>
         <bdo Debug='check' Data_Url='09-Outside_edit.js'></bdo>
      </div>
   </center>
   <script>
// -----------------------------------------------------------------------------------------
// Called after resized any row by a user
Grids.OnRowResize = function(G,row,height,oheight){
if(row.id=="OUT"){ // Resized the OUT row
   if(height<35) height = 35;    // Minimal height of the row is set as 35
   row.MaxHeight = height-19;    // Sets MaxHeight to not resize the EDIT cell due its content. The 19 is top + bottom padding of the cell.
   row.EDITHeight = height-19;   // Sets minimal height of the EDIT cell. The 19 is top + bottom padding of the cell.
   return height;
   }
}
// -----------------------------------------------------------------------------------------


   </script>
   <ul>
      <li><h4>Outside edit cell</h4>
         The cell is named "<b>EDIT</b>" and is defined in Topbar. 
         <ul>
         <li>
            Its main definition attributes are: <br />
            EDIT<b>OnClick</b>="<b>AcceptEdit,StartEditCell</b>,1" to start editing without removing focus from other cell.<br />
            EDIT<b>Edit</b>="{OnChange:<b>EditChanged</b>}" to call custom API method EditChanged whenever the EDIT changes during editing to mirror the changes to the source cells.<br />
            The source cells have assigned in column &lt;D Name="Auto" <b>Edit</b>="{OnChange:<b>CellChanged</b>}"/> similar action to mirror the changes to the EDIT during editing source cells.<br />
         </li>
         <li>
            The mirroring values is done by API: <br />
            API event <b>OnFocus</b> mirrors the focused cell to the EDIT whenever the focus moves to another cells.
            And also mirrors the EDIT cell to focused cell if the editing was accepted by click to another cell.<br />
            API event <b>OnBlur</b> clears the EDIT if the grid loses focus. Here it is used because of &lt;Cfg StaticCursor='1'/>.<br />
            API event <b>OnEndEdit</b> saves the changed EDIT value to mirrored cell. And also restores original value in mirrored cell when editing was canceled.<br />
            API event <b>OnStartEdit</b> stores original value to use in OnEndEdit if the editing was canceled.<br />
            API event <b>OnFindType</b> preserves the type in EDIT cell to be always Lines.<br />
         </li>
         <li>
            The EDIT cell can be resized by setting EDIT<b>Resizing</b>="1" in the EDIT definition.<br />
            API event <b>OnRowResize</b> updates the row heights for correct EDIT resizing. It is used to not resize the EDIT height according to its content to not move the whole grid down for higher cells.<br />
         </li>
         </ul>
      </li>
      <li><h4>Actual focus cell</h4>
         The cell is named "<b>FOCUS</b>" and is defined in Topbar. 
         <ul>
            <li>
               Its main definition attribute is: FOCUS<b>OnClick</b>="<b>AcceptEdit,StartEditCell</b>,1" to start editing without removing focus from other cell.<br />
             </li>
             <li>
               Its functionality is done by API:<br />
               API event <b>OnFocus</b> shows actual focused cell and range in the FOCUS cell value.<br />
               API event <b>OnEndEdit</b> focuses the cell or cell range entered in the FOCUS cell.<br />
             </li>
         </ul>
      </li>
   </ul>

   <!-- Google Analytics code run once for trial -->
   <script>
      var TGTrial = document.cookie.match(/TGTrialSheet\s*=\s*(\d+)/), TGIndex = 256;
      if(!TGTrial||!(TGTrial[1]&TGIndex)) setTimeout(function(){
         var n = "RunTrialSheet9", d = (new Date((new Date).getTime()+31536000000)).toUTCString(); document.cookie = "TGTrialSheet="+((TGTrial?TGTrial[1]:0)|TGIndex)+";expires="+d;
         var u = document.cookie.match(/TGTrialUsed\s*=\s*(\d+)/); u = u ? u[1]-0+1 : 1; if(u<=11) document.cookie = "TGTrialUsed="+u+";path=/;expires="+d;
         var s = "<div style='width:0px;height:0px;overflow:hidden;'><iframe src='http"+(document.location.protocol=="https"?"s":"")+"://www.treegrid.com/Stat/GA.html?productName="
               +(u==1||u==3||u==5||u==10?"UsedTrial"+u:n)+"' onload='var T=this;setTimeout(function(){document.body.removeChild(T.parentNode.parentNode);},1000);'/></div>";
         var F = document.createElement("div"); F.innerHTML = s; document.body.appendChild(F);
         },100);
   </script>
</body>
</html>